<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .a{
            color: red;
        }

        .b{
            font-size: 50px;
            font-family: "Microsoft YaHei UI";
        }
    </style>
</head>
<body>

<!--
    操作标签的属性值  可以使用vue中提供的 v-bind 指令
    使用  v-bind绑定的标签属性  v-bind:class    简写为  :class
-->
<div id="app">
<!--  {{}} 不能在标签属性中进行使用 只能用在标签内容的设置上-->
    <div  v-bind:class="cs" >
        hello  vue
    </div>
    <div  :class="cs" >
        hello  vue
    </div>
    <button @click="changStyle">改变样式</button>
</div>

<script>

    const vm = new Vue({
        el:'#app',
        data:{
            cs:'a'
        },
        methods:{
            changStyle(){
                this.cs = 'b'
            }
        }
    })

</script>


</body>
</html>
